<html>
<head>
<script type="text/javascript">

		var aJaxURL	= "server-side/report/r_Month.action.php";		//server side folder url
		var tName	= "report";

		$(document).ready(function () {
			GetTabs('tabs');
			client()
			LoadTable();
			});
	    $(document).on("tabsactivate", "#tabs", function() {
	    	LoadTable();

	    });
		function LoadTable(){
			var tab = GetSelectedTab('tabs');
			var c= $("#search_c").val();
			var p= $("#search_p").val();
			var m= $("#search_t").val();
			var y= $("#search_y").val();
			if (tab==0){
				var total = [2,4];

				 chart_st();
			}
			drawFirstLevel()
		    GetDataTable(tName+tab, aJaxURL, "get_list",  9, "client="+c+"&prod="+p+'&month='+m+"&year="+y+"&tab="+tab, 0,'','','',total);


		 };

	    $(document).on("change", "#search_y", function () {}
		   );
		   function client(){
				$.ajax({
	                url: aJaxURL,
	                data: "act=" + "client",
	                success: function (data) {
	                 if (typeof (data.error) != "undefined") {
	                        if (data.error != "") {
	                            alert(data.error);
	                        } else {
	                      //      alert(data.aaData);
	                        	$("#search_c").html(data.aaData);

	                        }
	                    }
	                }
	            });
			   }

		   $(document).on("change", ".inpt", function () {
			   LoadTable();
			   });

 function chart_st(){
	    $(document).ready(function() {
	    	var tab = GetSelectedTab('tabs');
			var c= $("#search_c").val();
			var p= $("#search_p").val();
			var m= $("#search_t").val();
			var y= $("#search_y").val();
	    	 $.getJSON(aJaxURL+"?act=chart"+"&client="+c+"&prod="+p+'&month='+m+"&year="+y+"&tab="+tab, function(json) {
	             chart = new Highcharts.Chart({
	                 chart: {
	                     renderTo: 'container12',
	                     type: 'line',
	                     marginRight: 130,
	                     marginBottom: 25
	                 },
	                 title: {
	                     text: 'რაოდენობები თვეების მიხედვით',
	                     x: -20 //center
	                 },
	                 subtitle: {
	                     text: '',
	                     x: -20
	                 },
	                 xAxis: {
	                     categories: json.m[0]
	                 },
	                 yAxis: {
	                     title: {
	                         text: 'რაოდენობა'
	                     },
	                     plotLines: [{
	                         value: 0,
	                         width: 1,
	                         color: '#808080'
	                     }]
	                 },
	                 tooltip: {
	                     formatter: function() {
	                             return '<b>'+ this.series.name +'</b><br/>'+
	                             this.x +': '+ this.y;
	                     }
	                 },
	                 legend: {
	                     layout: 'vertical',
	                     align: 'right',
	                     verticalAlign: 'top',
	                     x: -10,
	                     y: 100,
	                     borderWidth: 0
	                 },
	                 series: json.d
	             });
				//=------------------------------------------------
	             chart = new Highcharts.Chart({
	                 chart: {
	                     renderTo: 'container13',
	                     type: 'column',
	                     marginRight: 130,
	                     marginBottom: 25
	                 },
	                 colors: ['#0f0'],
	                 title: {
	                     text: 'შემოსავალი თვეების მიხედვით',
	                     x: -20 //center
	                 },
	                 subtitle: {
	                     text: '',
	                     x: -20
	                 },
	                 xAxis: {
	                     categories: json.m[0]
	                 },
	                 yAxis: {
	                     title: {
	                         text: 'თანხა'
	                     },
	                     plotLines: [{
	                         value: 0,
	                         width: 1,
	                         color: '#808080'
	                     }]
	                 },
	                 tooltip: {
	                     formatter: function() {
	                             return '<b>'+ this.series.name +'</b><br/>'+
	                             this.x +': '+ this.y;
	                     }
	                 },
	                 legend: {
	                     layout: 'vertical',
	                     align: 'right',
	                     verticalAlign: 'top',
	                     x: -10,
	                     y: 100,
	                     borderWidth: 0
	                 },
	                 series: json.d2
	             });
	             ///-----------------------------
	         });

	     });
			   }
 function drawFirstLevel(){
	 var options = {
                chart: {
                    renderTo: 'container14',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'კლიენტების მიხედვით'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'-'+this.point.y+' ზარი :  '+this.percentage.toFixed(2) +' %</b>';

                    }
                },
                plotOptions: {
                	pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                            	return '<b>'+ this.point.name +'-'+this.point.y+' ზარი :  '+this.percentage.toFixed(2) +' %</b>';
                            }
                        },
                        point: {
                            events: {
                                click: function() {
                                	$("#back").button({ disabled: false });
	                        		done[s_i]=this.name;
	                        		if(s_i==3) s_i=0;
	                        		else s_i++;
	                        		drawFirstLevel();
                                }
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'კატეგორიები',
                    data: []
                }]
            };
	 var tab = GetSelectedTab('tabs');
		var c= $("#search_c").val();
		var p= $("#search_p").val();
		var m= $("#search_t").val();
		var y= $("#search_y").val();

	var url     = aJaxURL+"?act=chart"+"&client="+c+"&prod="+p+'&month='+m+"&year="+y+"&tab="+tab;

    $.getJSON(url, function(json) {
                options.series[0].data = json.data;
                options.title['text']=json.text;
                chart = new Highcharts.Chart(options);
                $("#total_quantity").html("იტვირთება....")
             //   setTimeout(function(){ $("#total_quantity").html($("#qnt").html().split(">")[1]);}, 500);
	});
}

</script>
<style type="text/css">
#report1 tr td:nth-child(3){
	text-align: right !important;

}
</style>
</head>

<body>
<div id="tabs" style="width: 90%; margin: 0 auto; min-height: 768px;">
		<ul>
			<li><a href="#tab-0">თვეების მიხედვით</a></li>
			<li><a href="#tab-1">კლიენტების  მიხედვით</a></li>
		</ul>
 <div id="tab-0">
	<div id="dt_example" class="ex_highlight_row clear_box">
		<div id="container" >
		<div id="dynamic">
		<h2 align="center">თვეების მიხედვით</h2>
				<div id="button_area">
					<div class="left" style="width: 250px;">
							<select name="search_start" id="search_y" class="inpt" style="padding: 0px !important; height: 25px !important;">
							<option value="0">აირჩიეთ წელი</option>
							<option value="2015">2015</option>
							<option value="2014">2014 </option>
							<option value="2013">2013</option>
							</select>
					</div>
					<div class="left" style="width: 400px;">
							<select name="search_c" id="search_c" class="inpt " style="padding: 0px !important; width: 350px; height: 25px !important;">
							</select>
					</div>
					<div class="left" style="width: 250px;">
							<select name="search_p" id="search_p" class="inpt" style="padding: 0px !important; height: 25px !important;">
							<option value="0">აირჩიეთ წყარო</option>
							<option value="1">კარტრიჯი </option>
							<option value="2">პრინტერი</option>
							</select>
					</div>
				</div>

				<table id="report0" class="display  center_td" style="height: 99px;">
					<thead>
					<tr>
						<td>id</td>
						<td style="height:20px; width:40%">თვე</td>
						<td style="width:20%">რ-ბა</td>
						<td style="width:20%">დელტა</td>
						<td style="width:20%">თანხა</td>
						<td style="width:20%">დელტა</td>
					</tr>
					</thead>
					<tfoot>
					<tr>
							<th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>

                        </tr>
                       </tfoot>
				</table>
			</div>
			<div class="spacer"></div>
		</div>

	</div>

	<!-- jQuery Dialog -->
<table style="width: 1100px; text-align: center; margin: auto">
<tr><td><div id="container12" style="min-width: 400px; width:500px; height: 200px; margin: 0 auto"></div></td>
    <td><div id="container13" style="min-width: 400px; width:500px; height: 200px; margin: 0 auto"></div></td></tr>
</table>
</div>
 <div id="tab-1">
	<div id="dt_example" class="ex_highlight_row clear_box">
		<div id="container" >
		<div id="dynamic">
		<h2 align="center">თვეების მიხედვით</h2>
				<div id="button_area">
					<div class="left" style="width: 250px;">
							<select name="search_start" id="search_y" class="inpt" style="padding: 0px !important; height: 25px !important;">
							<option value="0">აირჩიეთ წელი</option>
							<option value="2015">2015</option>
							<option value="2014">2014 </option>
							<option value="2013">2013</option>
							</select>
					</div>
					<div class="left" style="width: 250px;">
							<select name="search_t" id="search_t" class="inpt" style="padding: 0px !important; height: 25px !important;">
							<option value="">–––</option>
							<option value="1">იანვარი</option>
							<option value="2">თებერველი </option>
							<option value="3">მარტი</option>
 							<option value="4">აპრილი</option>
							<option value="5">მაისი </option>
							<option value="6">ივნისი</option>
							<option value="7">ივლისი</option>
							<option value="8">აგვისტო</option>
							<option value="9">სექტემბერი</option>
							<option value="10">ოქტომბერი</option>
							</select>
					</div>
				</div>
<table style="width: 100%; text-align: center; margin: auto">
<tr><td>
				<br>
				<br>
				<table id="report1" class="display  center_td" style="height: 99px;">
					<thead>
					<tr>
						<td>id</td>
						<td style="width:100%">კლიენტი</td>
						<td style="width:60px">თანხა</td>
					</tr>
					</thead>
					<tfoot>
					<tr>
							<th>&nbsp;</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                        </tr>
                       </tfoot>
				</table>
</td>
    <td><div id='container14'  style="min-width: 400px; width:500px; height: 200px; margin: 0 auto"></div></td></tr>
</table>
			</div>
			<div class="spacer"></div>
		</div>
	</div>

	<!-- jQuery Dialog -->

</div>

</div>
</body>
</html>